<template>
  <div class="login_container">
    <div class="login_box">
      <!-- 头像区域 -->
      <div class="avatar_box">
        <img src="../assets/logo.png" alt="" />
      </div>
      <!-- 登录表单区域 -->
      <el-form label-width="0px" class="login_form">
        <!-- 用户名 -->
        <el-form-item>
          <el-input placeholder="请输入用户名" v-model="loginForm.admin_login_account"></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item>
          <el-input show-password placeholder="请输入密码" v-model="loginForm.admin_pwd"></el-input>
        </el-form-item>
        <div class="slider-demo-block">
          <span class="demonstration">请拖动滑块验证至{{ deHint }}</span>
          <el-slider v-model="demonstrationValue" @change="ppYzm"/>
        </div>
        <!-- 按钮区域 -->
        <el-row justify="end">
          <el-form-item class="login_btn">
            <el-button type="primary" v-if="canLogin" @click="login">登录</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {reactive, ref} from "vue";
import {ElMessage} from "element-plus";
let deHint = ref(0)
const demonstrationValue = ref(0)
const canLogin = ref(false)
const loginForm = reactive({
  admin_login_account:"",
  admin_pwd:""
})

// api
import system from '@/api/system.js'

getData();
function getData(){
  getYzm()
}

function ppYzm(){
  if(demonstrationValue.value === deHint.value){
    canLogin.value = true
  }else{
    canLogin.value = false
  }
}

function login(){
  system.login(loginForm)
      .then((res: any) => {
        if(res.ok === "ok"){
          window.sessionStorage.setItem('v1',res.data.token);
          window.sessionStorage.setItem('v2',res.data.t);
        }
        window.location.href = '/index';
      })
      .catch((error: any)=>{
        ElMessage.error("网络异常")
        console.log(error)
      })
}

function getYzm(){
  system.getYzm()
      .then((res: any) => {
        deHint.value = res.data.yzm
      })
      .catch((error: any)=>{
        ElMessage.error("网络异常")
        console.log(error)
      })
}

</script>

<style scoped>
.login_container {
  background-image: url("../assets/login.svg");
  background-repeat: no-repeat;
  background-position: center 11rem;
  background-size: 100%;
  height: 100vh;
}
.login_box{
  box-shadow: 0px 0px 5px #ddd;
  width: 30rem;
  height: 20rem;
  background-color: #fff;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.avatar_box {
  height: 10rem;
  width: 10rem;
  border: 1px solid #eee;
  border-radius: 50%;

  padding: 10px;

  box-shadow: 0 0 10px #ddd;

  position: absolute;

  left: 50%;

  transform: translate(-50%, -50%);

  background-color: #fff;
}
img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #eee;
}
.login_form {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}
.login_btn {
  display: flex;
  justify-content: flex-end;
}
</style>
